<template>
  <div id="apply">

    <!-- 申请内容 -->
    <div class="apply-b">
      <w-form-validate @on-validate="onSubmit">
        <!-- 申请导航 -->
        <div class="clearfix">
          <span class="title">{{applyType == 'purchaser' ? '采购商' : '供应商'}}资料申请</span>
          <span class="goBtn" @click="$router.go(-1)">返回</span>
        </div>
        <!-- 申请表单内容 采购商申请资料 -->
        <div class="apply-b-c clearfix" v-if="applyType == 'purchaser'">
          <div class="form">
            <div class="row-input mar-r">
              <div class="label">公司名称</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.company" rule="isEmpty|between:1-15" error="请输入公司名称|公司名称15字内" :maxlength="16"></w-input>
              </div>
            </div>
            <div class="row-input">
              <div class="label">营业执照号</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.licenseNumber" rule="isEmpty|isNum" :maxlength="18" error="请输入营业执照号|输入15或18位营业执照号"></w-input>
              </div>
            </div>
            <div class="fr row-input">
              <div class="label">企业类型</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.enterpriseType" rule="isEmpty|between:1-6" error="请输入企业类型|企业类型6字内" :maxlength="7"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r0">
              <div class="label">员工人数</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.employeesNum" rule="isEmpty|onlyInt|between:1-10" error="请输入员工人数|请输入数字|人数至多10位" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">主营行业</div>
              <select class="input-w" v-model="oApplyRole.mainIndustryId" @change="onSelectIndustry(true)"> 
                <option v-for="(item, index) in aIndustryId" :key="index" :value="item.tradeId">{{item.tradeName}}</option>
              </select>
            </div>
            <div class="fr row-input">
              <div class="label">主营产品</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.mainProducts" rule="isEmpty|between:1-10" error="请输入主营产品|主营产品10字内" :maxlength="11"></w-input>
              </div> 
            </div>
          </div>
          
          <div class="form">
            <div class="row-input mar-r0">
              <div class="label">主要客户群体</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.mainCustomerGroups" rule="isEmpty|between:1-10" error="请输入客户群体|客户群体10字内" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">产品风格</div>
              <select id="" class="input-w" v-model="oApplyRole.productStyleId">
                <option v-for="(style, index) in aStyle" :key="index" :value="style.id">{{style.title}}</option>
              </select>
            </div>
            <div class="row-input fr">
              <div class="label">年销售额</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.yearSales" rule="isEmpty|onlyNum|between:1-10" error="请输入年销售额|格式不正确|年销售至多10位" :maxlength="11"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r0">
              <div class="label">月销售额</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.monthSales" rule="isEmpty|onlyNum|between:1-10" error="请输入月销售额|格式不正确|月销售至多10位" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">销售网址</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.mainSalesChannels" rule="isWeb" error="销售网址格式不正确"></w-input>
              </div> 
            </div>
            <div class="row-input fr">
              <div class="label">业务联系人</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.businessContacts" rule="isEmpty|isName|between:1-50" error="请输入业务联系人|格式不正确|业务联系人50字内"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r0">
              <div class="label">业务联系人电话</div>
              <div class="input-w">
                <w-input type="text" :maxlength="11" v-model="oApplyRole.contactPhone" rule="isEmpty|isMobile" error="请输入业务联系人|手机号码不正确"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">所在地</div>
              <div style="display: inline-block">
                <w-areapicker v-model="oApplyRole.quId"></w-areapicker>
              </div>
              <div class="area">
                <w-input type="text" v-model="oApplyRole.quId" rule="isEmpty" error="请选择省市区"></w-input>
              </div>
            </div>
          </div>

          <div class="form">
            <div class="row-input">
              <div class="label">详细地址</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.detailAddress" rule="isEmpty|between:5-100" error="请输入详细地址|详细地址至少5字"></w-input>
              </div> 
              <!-- <input type="text" class="input-w1" v-model="oApplyRole.detailAddress"> -->
            </div>
          </div>
        </div>

        <!-- 申请表单内容 供应商申请资料 -->
        <div class="apply-b-c clearfix" v-if="applyType == 'supplier'">
          <div class="form">
            <div class="row-input mar-r4">
              <div class="label">公司名称</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.company" rule="isEmpty|between:1-15" error="请输入公司名称|公司名称15字内" :maxlength="16"></w-input>
              </div>
            </div>
            <div class="row-input">
              <div class="label">营业执照号</div>
              <div class="input-w1">
                <w-input type="text" v-model="oApplyRole.licenseNumber" :maxlength="18" rule="isEmpty|isNum" error="请输入营业执照号|输入15或18位营业执照号"></w-input>
              </div>
            </div>
            <div class="row-input fr">
              <div class="label">企业类型</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.enterpriseType" rule="isEmpty|between:1-6" error="请输入企业类型|企业类型6字内" :maxlength="7"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r5">
              <div class="label">员工人数</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.employeesNum" rule="isEmpty|onlyInt|between:1-10" error="请输入员工人数|请输入数字|人数至多10位" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">主营行业</div>
              <select id="" class="input-w" v-model="oApplyRole.mainIndustryId" @change="onSelectIndustry(true)"> 
                <option v-for="(item, index) in aIndustryId" :key="index" :value="item.tradeId">{{item.tradeName}}</option>
              </select>
            </div>
            <div class="row-input fr">
              <div class="label">主营产品</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.mainProducts" rule="isEmpty|between:1-10" error="请输入主营产品|主营产品10字内" :maxlength="11"></w-input>
              </div> 
            </div>
          </div>
          <div class="form">
            <div class="row-input mar-r5">
              <div class="label">主要客户群体</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.mainCustomerGroups" rule="isEmpty|between:1-10" error="请输入客户群体|客户群体10字内" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">产品风格</div>
              <select id="" class="input-w" v-model="oApplyRole.productStyleId">
                <option v-for="(style, index) in aStyle" :key="index" :value="style.id">{{style.title}}</option>
              </select>
            </div>
            <div class="row-input fr">
              <div class="label">年营业额</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.yearSales" rule="isEmpty|onlyNum|between:1-10" error="请输入年营业额|请输入正确格式|年营业额10位内" :maxlength="11"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r5">
              <div class="label">年出口额</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.yearExportNum" rule="isEmpty|onlyNum" error="请输入年出口额|请输入正确格式"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">月产量</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.monthProduction" rule="isEmpty|onlyNum|between:1-10" error="请输入月销量|请输入正确格式|月销量10位内" :maxlength="11"></w-input>
              </div> 
            </div>
            <div class="row-input fr">
              <div class="label">业务联系人</div>
              <div class="input-w">
                <w-input type="text" v-model="oApplyRole.businessContacts" rule="isEmpty|isName|between:1-50" error="请输入业务联系人|格式不正确|业务联系人50字内"></w-input>
              </div> 
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r5">
              <div class="label">业务联系人电话</div>
              <div class="input-w">
                <w-input type="text" :maxlength="11" v-model="oApplyRole.contactPhone" rule="isEmpty|isMobile" error="请输入业务联系人|手机号码不正确"></w-input>
              </div> 
            </div>
            <div class="row-input">
              <div class="label">所在地</div>
              <div style="display: inline-block">
                <w-areapicker v-model="oApplyRole.quId"></w-areapicker>
              </div>
              <div class="area">
                <w-input type="text" v-model="oApplyRole.quId" rule="isEmpty" error="请选择省市区"></w-input>
              </div>
            </div>
          </div>

          <div class="form">
            <div class="row-input mar-r4">
              <div class="label">详细地址</div>
              <w-input class="input-w1" v-model="oApplyRole.detailAddress" rule="isEmpty|between:1-50" error="请输入详细地址|详细内容50字内" :maxlength="51"></w-input>
            </div>
            <div class="row-input">
              <div class="label">农商行商户号</div>
              <w-input class="input-w1" v-model="oApplyRole.subMerchantId" rule="RCI" error="请输入正确的农商行账号"></w-input>
              <button class="get-account" type="button" @click="getAccount">获取农商行二级账号</button>
            </div>
          </div>

          <div class="form">
            <div class="row-input">
              <div class="label"></div>
              <div class="input-w4">
                <w-input type="textarea" v-model="oApplyRole.shopIntroduction" rule="isEmpty|between:1-200" error="请输入店铺介绍|详细内容200字内" holder="店铺介绍" :maxlength="201"></w-input>
              </div> 
            </div>
          </div>
        </div>

        <!-- 下一步操作 -->
        <div class="apply-foot">
          <button class="nextBtn" type="submit">提交</button>
          <w-checkbox v-model="isCheckProtocol" label="protocol">
            已阅读并同意<a class="c-main" @click.prevent="onShowProtocol(true)">《升级协议条款》</a>
          </w-checkbox>
        </div>
      </w-form-validate>
    </div>
    <!--《升级协议条款》弹框  -->
    <div class="dialog-modal" v-show="isText">
      <div class="bg"></div>
      <div class="modal">
        <i class="iconfont ico-close" @click="isText = false"></i>
        <!--同意书，正文  -->
        <div class="content" v-html="argeementText"></div>
        <div class="btn-main">
          <w-button type="main" class="btnC" @on-click="onShowProtocol(false)">已阅读并同意</w-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiTrade, apiApplyRole, apiEnterArgeement, apiCreateUpdateIndex } from 'js/api'
  import { mapGetters } from 'vuex'
  import { storage, session } from 'js/util'

  export default {
    data() {
      return {
        isEdit: false, // 是否是编辑状态
        applyType: '', // 入驻类型
        aIndustryId: session.get('peopleList'), // 行业
        aStyle: [], // 风格
        isCheckProtocol: true, // 是否选中协议，默认选中
        oApplyRole: { // 提交修改数据
          company: '', // 公司名称
          licenseNumber: '', // 营业执照号
          enterpriseType: '', // 企业类型
          employeesNum: '', // 员工人数
          mainIndustryId: '', // 主营行业Id
          mainProducts: '', // 主营产品
          mainCustomerGroups: '', // 主要客户群体
          productStyleId: '', // 产品风格id
          mainSalesChannels: '', // 销售网址 采购商
          yearSales: '', // 年销售额
          quId: '', // 区id
          monthSales: '', // 月销售额 采购商
          detailAddress: '', // 详细地址
          businessContacts: '', // 业务联系人
          contactPhone: '', // 联系人电话
          shopIntroduction: '', // 店铺介绍 供应商
          monthProduction: '', // 月产量 供应商
          yearExportNum: '', // 年出口额 供应商
          subMerchantId: '' // 农商行商户号
        },
        isText: false, // 协议框显示隐藏
        argeementText: '' // 升级协议文本
      }
    },
    computed: {
      ...mapGetters(['token', 'enterInfo', 'enterTypeName', 'enterType', 'storeId'])
    },
    created() {
      // debugger
      if (!this.aIndustryId) {
        // 获取行业风格数据
        apiTrade().then(data => {
          this.aIndustryId = data.TradeList
          session.set('peopleList', this.aIndustryId)
          // 主营行业
          this.oApplyRole.mainIndustryId = this.oApplyRole.mainIndustryId ? this.oApplyRole.mainIndustryId : this.aIndustryId[0].tradeId
          console.log('*************', this.oApplyRole.mainIndustryId)
          this.onSelectIndustry(false)
        })
      } else {
        // 从store中获取数据
        this.oApplyRole.mainIndustryId = this.enterInfo.mainIndustryId ? this.enterInfo.mainIndustryId : this.aIndustryId[0].tradeId
        // this.oApplyRole.productStyleId = this.enterInfo.productStyleId ? this.enterInfo.productStyleId : this.enterInfo.productStyleId
        this.onSelectIndustry(false)
      }
      this.isEdit = this.$route.query.edit  // 修改和新增状态
      this.applyType = this.$route.query.type // 新增时商户的类型
      const enterId = this.$route.query.id // 修改时需要的id
      // 判断是修改还是新增
      if (this.isEdit === '1') { // 修改
        if (enterId) {
          this.oApplyRole = this.enterInfo
          this.oApplyRole.id = enterId
          this.oApplyRole.quId = `${this.oApplyRole.shengId}/${this.oApplyRole.shiId}/${this.oApplyRole.quId}`
          setTimeout(() => {
            this.$children[0].$children[11]._updateSelectList(this.oApplyRole.quId)
          }, 30)
        } else {
          this.$toast('缺少商户ID', () => {
            this.$router.push('/my/extra')
          })
        }
      } else { // 新增
        if (this.applyType) {
          this.oApplyRole.type = this.applyType
        } else {
          this.$toast('缺少商户类型参数', () => {
            this.$router.push('/my/extra')
          })
        }
      }
    },
    methods: {
      // 更新商家信息索引
      upDateStore() {
        if (this.storeId) {
          apiCreateUpdateIndex('store', this.storeId).then(data => {
          })
          apiCreateUpdateIndex('goods').then(data => {
          })
        }
      },
      // 选择行业id，相应切换风格
      onSelectIndustry(isChange) {
        const industryId = this.oApplyRole.mainIndustryId
        if (isChange) {
          this.oApplyRole.productStyleId = ''
        }
        this.aIndustryId.forEach(item => {
          if (item.tradeId == industryId) {
            this.aStyle = item.styles
            this.oApplyRole.productStyleId = this.oApplyRole.productStyleId ? this.oApplyRole.productStyleId : (this.aStyle.length && this.aStyle[0].id)
            // 如果是采购商点击了主营行业，则选中当前行业下第一个产品风格
            // this.oApplyRole.productStyleId = isChange ? (this.aStyle.length && this.aStyle[0].id) : this.oApplyRole.productStyleId
          }
        })
      },
      // 查看协议
      onShowProtocol(bool) {
        if (bool) {
          apiEnterArgeement().then(data => {
            this.argeementText = data.content
            this.isText = true
          })
        } else {
          this.isText = false
        }
      },
      // 获取农商行账号
      getAccount() {
        window.open('/pay/shanghu')
      },
      // 提交
      onSubmit() {
        // 申请资料提交，协议勾选才能提交
        if (this.isCheckProtocol) {
          apiApplyRole(this.token, this.oApplyRole).then(data => {
            session.set('storeId', data.storeId)
            const applyId = data.applyId
            if (applyId) {
              this.$toast('资料审核中', () => {
                storage.set('applyId', applyId)
                this.$router.push(`/my/extra`)
              })
            } else {
              this.$toast('资料审核中', () => {
                this.$router.push('/my/extra')
                this.upDateStore()
              })
            }
          })
        } else {
          this.$toast('请勾选升级协议条款')
        }
      }
    }
  }
</script>

<style lang="scss">
  .row-input {
    .form-control {
      height: 22px;
    }
    .w-input .error-tip {
      bottom: -18px;
    }
    .input-w4 textarea.form-control {
      height: 70px;
    }
  }
  .area {
    height: 0 !important;
    display: inline-block;
    .form-control {
      display: none;
    }
    .error-tip {
      width: 100px;
      margin-left: -297px;
      bottom: -24px !important;
    }
  }
</style>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .apply-h{
    height: 60px;
    background-color: #fff;
    padding: 10px 60px;
    margin-bottom: 10px;
    text-align: center;
  }
  .item{
    margin-left: 35px;
    display: inline-block;
  }
  .active{
    background-color: #F00384 !important;
    color:#fff !important;
  }
  .nav{
    width: 160px;
    height: 40px;
    background-color: #ddd;
    color: #999;
    border-radius: 6px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
  }
  .icon-arrow{
    display: inline-block;
    width: 12px;
    height: 24px;
    vertical-align: middle;
    margin-left: 35px;
    background: url('../../assets/ico-arrow-right1.png') no-repeat 0 0;
  }
  .apply-b{
    background-color: #fff;
    padding: 20px;
    .title{
      color: #666;
    }
    .goBtn{
      height: 28px;
      border: 1px solid;
      color: #F00384;
      line-height: 28px;
      text-align: center;
      padding: 0 20px;
      float: right;
      cursor: pointer;
    }
    &-c{
      border: 1px solid #ddd;
      margin-top: 14px;
      padding: 25px 50px 25px 25px;
    }
  }

  .form {
    margin-bottom: 30px;
    input {
      border: 1px solid #ddd;
      height: 22px;
    }
    .row-input {
      display: inline-block;
      .label{
        width: 98px;
        display: inline-block;
        text-align: right;
        color: #999;
      }
    }
  }
  .mar-r{
    margin-right: 59px;
  }
  .mar-r0 {
    margin-right: 168px
  }
  .mar-r1{
    margin-right: 35px;
  }
  .mar-r2{
    margin-right: 48px;
  }
  .mar-r3{
    margin-right: 17px;
  }
  .mar-r4{
    margin-right: 70px;
  }
  .mar-r5{
    margin-right: 180px;
  }
  .input-w{
    width: 120px;
    display: inline-block;
    textarea.form-control {
      width: 370px;
      height: 70px;
    }
  }
  .input-w1{
    width: 230px;
    display: inline-block;
  }
  .input-w2{
    width: 366px;
    display: inline-block;
  }
  .input-w3{
    width: 90px;
    display: inline-block;
  }
  .input-w4 {
    width: 864px;
    display: inline-block;
    margin-left: 98px;
  }
  
  select{
    border: 1px solid #ddd;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #666;
  }
  .get-account{
    height: 22px;
    background-color: #F10180;
    color: #FFF;
    position: relative;
    top: -1px;
    padding: 0 10px;
  }
  .nextBtn{
    width: 160px;
    height: 38px;
    line-height: 38px;
    background-color: #F10180;
    color: #FFF;
    text-align: center;
    float: right;
    cursor: pointer;
  }
  .apply-foot {
    margin-top: 20px;
    text-align: right;
    height: 38px;
    .m-checkbox {
      margin-top: 10px;
      margin-right: 20px;
    }
  }
  // 同意书，模态框
  .dialog-modal {
    .bg {
      background-color: #000;
      opacity: 0.4;
      position: fixed;
      z-index: 111;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .modal {
      width: 800px;
      max-height: 450px;
      background-color: $color-white;
      position: fixed;
      z-index: 1111;
      top: 50%;
      left: 0;
      right: 0;
      margin: 0 auto;
      padding: 33px 60px;
      transform: translateY(-50%);
      overflow-y: auto;
      .ico-close {
        position: absolute;
        right: 15px;
        cursor: pointer;
      }
    }
    .btn-main {
      margin-top: 10px;
      text-align: center;
      .btnC {
        width: 231px;
      }
    }
  }
</style>